<template>
  <div>
    <!-- 上传文件 -->
    <header-tab>
      <span slot="left" @click="Go_me"><van-icon name="arrow-left" /></span>
      <span slot="title">宠物资料</span>
    </header-tab>
    <div class="touxiang">
      <van-uploader
        class="list-upload"
        :after-read="afterRead"
        accept="image/jpeg,image/png"
        :preview-image="false"
        v-model="fileList"
        multiple
        :max-count="1"
      >
        <template v-if="imgurl == null">
          <van-image
            fit="cover"
            round
            width="10rem"
            height="10rem"
            :src="this.$route.query.p_img"
            style="background-color: #f0f0f0; border: 1px solid gray"
        /></template> </van-uploader
      ><img v-if="imgurl" class="afterImg" :src="imgurl" alt="" />
    </div>
    <van-field name="radio" label="类型">
      <template #input>
        <van-radio-group v-model="typeRadio" direction="horizontal">
          <van-radio name="cat">猫咪</van-radio>
          <van-radio name="dog">狗狗</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!-- 宠物名 -->
    <van-field v-model="petName" label="名字" placeholder="请填写宠物名字" />
    <!-- 宠物年龄 -->
    <van-field v-model="petAge" type="number" label="年龄" placeholder="请输入阿拉伯数字" />
    <!-- 宠物性别 -->
    <van-field name="radio" label="性别">
      <template #input>
        <van-radio-group v-model="sexRadio" direction="horizontal">
          <van-radio name="female">女生</van-radio>
          <van-radio name="male">男生</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!-- 宠物品种 -->
    <van-field v-model="petBreed" label="品种" placeholder="非必填" />
    <van-field
      v-model="describe"
      rows="2"
      autosize
      label="宠物简介"
      type="textarea"
      maxlength="50"
      placeholder="非必填"
      show-word-limit
    />
    <div class="bottom_btn">
      <span class="change_btn" @click="changePetInfo">修改</span>
      <span class="delete_btn" @click="deletePetInfo">删除</span>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Toast } from 'vant';
import HeaderTab from '@/components/HeaderTab.vue';
export default {
  components: { HeaderTab },
  props: ['petNumber', 'p_id', 'p_img', 'p_name', 'p_year', 'p_gender', 'p_type', 'p_content', 'p_breed'],
  data() {
    return {
      imgurl: null,
      petName: '',
      petNameERR: false,
      petAge: '',
      petAgeERR: false,
      typeRadio: '',
      sexRadio: '',
      petBreed: '',
      describe: '',
      fileList: [],
    };
  },
  methods: {
    // 删除宠物
    deletePetInfo() {
      Dialog.confirm({
        title: '请确认',
        message: '确认删除宠物吗?',
      })
        .then(() => {
          // on confirm
          const url = 'pet/delete';
          let p_id = this.$route.query.p_id;
          let params = `p_id=${p_id}`;
          this.axios.post(url, params).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              Toast.success('宠物删除成功');

              setTimeout(() => {
                this.$router.push('/me');
              }, 2000);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 修改宠物信息
    changePetInfo() {
      console.log(this.sexRadio);
      let params = `p_id=${this.$route.query.p_id}&&pImg=${
        this.imgurl != null ? this.imgurl : this.$route.query.p_img
      }&&pName=${this.petName}&&pYear=${this.petAge}&&pGender=${this.sexRadio == 'female' ? '0' : '1'}&&pType=${
        this.typeRadio == 'cat' ? '1' : '2'
      }&&pContent=${this.describe}&&pBreed=${this.petBreed}`;

      this.axios.put('/pet/changePetInfo', params).then(res => {
        console.log('修改结果', res);
        if (res.data.code == 200) {
          Toast.success('修改成功');
          setTimeout(() => {
            this.$router.go(-1);
          }, 2000);
        } else {
          this.$toast('修改失败');
          setTimeout(() => {
            this.$router.go(-1);
          }, 2000);
        }
      });
    },

    afterRead(file) {
      var data = new FormData();
      data.append('file', file.file);
      let config = {
        headers: {
          //添加请求头
          'Content-Type': 'multipart/form-data',
        },
      };
      //上传图片
      this.axios.post('http://localhost:9000/upload', data, config).then(res => {
        console.log('res', res);
        res.data.status == 200;
        this.fileList.push(res.data.data);
        // console.log(this.fileList[1]);
        this.imgurl = res.data.data;
        console.log(this.imgurl);
      });
    },

    Go_me() {
      this.$router.go(-1);
    },
  },
  mounted() {
    if (this.$route.query.p_type == 1) {
      this.typeRadio = 'cat';
    } else {
      this.typeRadio = 'dog';
    }

    if (this.$route.query.p_gender == 0) {
      this.sexRadio = 'female';
    } else {
      this.sexRadio = 'male';
    }
    this.petName = this.$route.query.p_name;
    this.petAge = this.$route.query.p_year;
    this.describe = this.$route.query.p_content;
    this.petBreed = this.$route.query.p_breed;
    // this.imgurl = this.$route.query.p_img;
    console.log(sessionStorage.getItem('UserID'));
  },
};
</script>

<style lang="scss" scoped>
.touxiang {
  background-color: #f8e176;
  height: 15rem;
  text-align: center;
  padding-top: 5rem;
  position: relative;
}
.afterImg {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid gray;
  background-color: #f0f0f0;
}

.bottom_btn {
  position: fixed;
  bottom: 1rem;
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: space-between;
  span {
    display: inline-block;
    text-align: center;
    line-height: 5rem;
    margin: 0 auto;
    width: 40%;
    font-size: 1.6rem;
  }
  .change_btn {
    background-color: #f8e176;
    color: white;
  }
  .delete_btn {
    background-color: #ffffff;
    border: 1px solid #f8e176;
  }
}
</style>
